<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Component_Props</title>
    <script src="../Vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <product v-for="item,index in schools" :item="item" :index="index" @c-school="schooler"></product>
    </ul>
    <p>当前位置是:{{finalLocation}}</p>
</div>

<script>

	Vue.component('product',{
			props:['item','index'],
			template: "<li>" +
				"<h3>{{index}}-{{item.schoolName}}</h3>" +
				"<h4>地理位置:{{item.location}}</h4>" +
                "<button @click='$root.finalLocation=item.schoolName'>选择学校</button>" +
                // 1.将方法作为参数传入实现 此时需要指定props + :cschool="schooler
				// "<button @click='cschool(item.schoolName)'>选择学校</button>" +

				// 2.利用this指针实现,不需要传值 此时需要this.$parent.函数名 or $patent.函数名 or
				// "<button @click='ChangeSchool(item.schoolName)'>选择学校</button>"
				// "<button @click='$parent.schooler(item.schoolName)'>选择学校</button>"
				// "<button @click='$parent.finalLocation=item.schoolName'>选择学校</button>"

                // 3.用$root方法完成
				// "<button @click='$root.schooler(item.schoolName)'>选择学校</button>"
				// "<button @click='$root.finalLocation=item.schoolName'>选择学校</button>"


				"</li>",
            methods:{
	            ChangeSchool:function(schoolName){
	            	this.$parent.schooler(schoolName)
                }
            }
		}
	)
	let app = new Vue({
		el:"#app",
		data:{
			finalLocation:'暂无数据',
			schools:[
				{
					schoolName:'pku',
					location:'beijing'
				},
				{
					schoolName:'thu',
					location:'beijing'
				},
				{
					schoolName:'xmu',
					location:'xiaMen'
				},
			]
		},
		methods:{
			schooler:function (schoolName) {
				console.log('事件被触发')
				this.finalLocation=schoolName
			}
		}
	})
</script>
</body>
</html>